<template>

  <div style="margin: auto;width: 500px;padding-top: 200px;padding-left: 50px">
  <a-form
      ref="formRef"
      name="custom-validation"
      :model="formState"
      :rules="rules"
      v-bind="layout"
      @finish="handleFinish"
      @validate="handleValidate"
      @finishFailed="handleFinishFailed"

  >
    <a-form-item has-feedback label="账号" name="userId">
      <a-input v-model:value="formState.userId" type="text" autocomplete="off" />
    </a-form-item>
    <a-form-item has-feedback label="密码" name="password" >
      <a-input v-model:value="formState.password" type="password" autocomplete="off" />
    </a-form-item>
    <a-form-item has-feedback label="重复密码" name="checkPass">
      <a-input v-model:value="formState.checkPass" type="password" autocomplete="off" />
    </a-form-item>

    <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary" html-type="submit">注册</a-button>
      <a-button style="margin-left: 10px" @click="resetForm">重置</a-button>
    </a-form-item>
  </a-form>
  </div>
  <div style="margin-left: 640px">
    <router-link to="/login"><el-link type="primary">已有账号？点击去登录</el-link></router-link>
  </div>
</template>
<script>
import {reactive, ref} from "vue";
import request from "@/utils/request";
import md5 from 'js-md5'
import {message, notification} from "ant-design-vue";
import { useRouter } from 'vue-router';
import store from "@/store";

export default {
  name:"Sign",
  data(){
    return{
    }
  },

  methods:{
  },


  setup() {
    const formRef = ref();
    const formState = reactive({
      userId:'',
      password: '',
      checkPass: '',
    });

    let validateId=async (_rule, value)=>{
      if (value===''){
        return Promise.reject('请输入账号')
      }else {
        return Promise.resolve();
      }

    }


    // let validatePass = async (_rule, value) => {
    //   // let zz=new RegExp(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,30}$/)
    //   if (value === '') {
    //     return Promise.reject('请输入密码');
    //   }
    //   if (value.length<6){
    //     return Promise.reject('密码不小余6位');
    //   }
    //   else {
    //
    //     if (formState.checkPass !== '') {
    //       formRef.value.validateFields('checkPass');
    //     }
    //
    //     return Promise.resolve();
    //   }
    // };

    let validatePass2 = async (_rule, value) => {
      if (value === '') {
        return Promise.reject('请再次输入密码');
      } else if (value !== formState.password) {
        return Promise.reject("两次密码不正确");
      } else {
        return Promise.resolve();
      }
    };

    const rules = {

      userId:[{
        required: true,
        validator: validateId,
        trigger: 'change',
      }],

      password: [{
        required: true,
        // validator: validatePass,
        pattern:/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,30}$/,
        message:'密码不小余6位且由数字和字母组成！',
        trigger: 'change',
      }],
      checkPass: [{
        validator: validatePass2,
        trigger: 'change',
      }],
    };
    const layout = {
      labelCol: {
        span: 4,
      },
      wrapperCol: {
        span: 14,
      },
    };

    const tiaozhuan = () => {
      router.push('/login')
    }
    const router = useRouter();
    const handleFinish = values => {
      console.log(values);
      let user={
        userId:values.userId,
        password:md5(values.password)
      }
      request.post("http://localhost:8002/user/adduser",user).then(res=>{
        console.log("res:  "+res.code)
        if (res.code===6){
          message.warning('该账号已存在！');
        }else{
          store.commit("setCode",200)
          tiaozhuan()
        }

      })
    };

    const handleFinishFailed = errors => {
      console.log(errors);
    };

    const resetForm = () => {
      formRef.value.resetFields();
    };

    const handleValidate = (...args) => {
      console.log(args);
    };

    return {
      formState,
      formRef,
      rules,
      layout,
      handleFinishFailed,
      handleFinish,
      resetForm,
      handleValidate,
      router
    };
  },

}
</script>